<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <Top/>
      </el-header>
      <el-container>
        <el-aside>
          <Menu/>
        </el-aside>
        <el-main>
          <el-row>
            <el-col>
              <!-- :with-credentials="true"  允许传cookie,从客户端 向服务端传cookie,有了cookie就有了session  所以Security认为是已经登录的用户 -->
              <el-upload ref="uploadRef" class="upload-demo"
                         action="http://localhost:8081/upload/test1"
                         :auto-upload="false"
                         :with-credentials="true"
                         :on-success="upsuccess">
                <template #trigger>
                  <el-button type="success">选择文件</el-button>
                </template>
                <el-button class="ml-4" type="success" @click="submitUpload">点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip"></div>
                </template>
              </el-upload>
            </el-col>
            <el-col>
              <a href="http://localhost:8081/export/stu/excel2">导出全部数据</a>
            </el-col>
            <el-col>
              <a href="http://localhost:8081/export/stu/word1">导出测试的word</a>
            </el-col>
          </el-row>
          <el-table :data="stuList" stripe style="width: 100%">
            <el-table-column prop="id" label="学生ID" width="180"/>
            <el-table-column prop="name" label="学生姓名" width="180"/>
            <el-table-column prop="age" label="年龄"/>

            <el-table-column label="操作">
              <template #default="scope">

              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from "vue";
import axios from '@/plugins/axios.js'
import Top from "@/components/Top.vue";
import Menu from "@/components/Menu.vue";

const uploadRef=ref()
let submitUpload=()=>{
  uploadRef.value.submit()
}
let upsuccess = (response,file,fileList)=>{
  console.log(response)
  query();
}

let stuList = ref([])

let query = () => {
  let param = {
    "pageNum": 1,
    "pageSize": 10
  }
  axios.get("test/stu/page", param).then(result => {
    console.log(result)
    if (result.code === 200) {
      stuList.value = result.data;
    }
  })
}

onMounted(() => {
  query();
});
</script>

<style scoped>

</style>